<template>
  <div class="p-4">
    <BasicTable @register="registerTable" @edit-change="onEditChange">
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <TableAction :actions="createActions(record)" />
        </template>
      </template>
    </BasicTable>
  </div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import {
  BasicTable,
  useTable,
  TableAction,
  BasicColumn,
  ActionItem,
  EditRecordRow,
} from "@/components/Table";
import { optionsListApi } from "@/api/demo/select";

import { demoListApi } from "@/api/demo/table";
import { treeOptionsListApi } from "@/api/demo/tree";
import { cloneDeep } from "lodash-es";
import { useMessage } from "@/hooks/web/useMessage";

const columns: BasicColumn[] = [
  {
    title: "输入框",
    dataIndex: "name-group",
    editRow: true,
    children: [
      {
        title: "输入框",
        dataIndex: "name",
        editRow: true,
        editComponentProps: {
          prefix: "$",
        },
        width: 150,
      },
      {
        title: "默认输入状态",
        dataIndex: "name7",
        editRow: true,
        width: 150,
      },
      {
        title: "输入框校验",
        dataIndex: "name1",
        editRow: true,
        align: "left",
        // 默认必填校验
        editRule: true,
        width: 150,
      },
      {
        title: "输入框函数校验",
        dataIndex: "name2",
        editRow: true,
        align: "right",
        editRule: async (text) => {
          if (text === "2") {
            return "不能输入该值";
          }
          return "";
        },
      },
      {
        title: "数字输入框",
        dataIndex: "id",
        editRow: true,
        editRule: true,
        editComponent: "InputNumber",
        width: 150,
      },
    ],
  },
  {
    title: "下拉框",
    dataIndex: "name3",
    editRow: true,
    editComponent: "Select",
    editComponentProps: {
      options: [
        {
          label: "Option1",
          value: "1",
        },
        {
          label: "Option2",
          value: "2",
        },
        {
          label: "Option3",
          value: "3",
        },
      ],
    },
    width: 200,
  },
  {
    title: "远程下拉",
    dataIndex: "name4",
    editRow: true,
    editComponent: "ApiSelect",
    editComponentProps: {
      api: optionsListApi,
      resultField: "list",
      labelField: "name",
      valueField: "id",
    },
    width: 200,
  },
  {
    title: "远程下拉树",
    dataIndex: "name8",
    editRow: true,
    editComponent: "ApiTreeSelect",
    editRule: false,
    editComponentProps: {
      api: treeOptionsListApi,
      resultField: "list",
    },
    width: 200,
  },
  {
    title: "日期选择",
    dataIndex: "date",
    editRow: true,
    editComponent: "DatePicker",
    editComponentProps: {
      valueFormat: "YYYY-MM-DD",
      format: "YYYY-MM-DD",
    },
    width: 150,
  },
  {
    title: "时间选择",
    dataIndex: "time",
    editRow: true,
    editComponent: "TimePicker",
    editComponentProps: {
      valueFormat: "HH:mm",
      format: "HH:mm",
    },
    width: 100,
  },
  {
    title: "勾选框",
    dataIndex: "name5",
    editRow: true,

    editComponent: "Checkbox",
    editValueMap: (value) => {
      return value ? "是" : "否";
    },
    width: 100,
  },
  {
    title: "开关",
    dataIndex: "name6",
    editRow: true,
    editComponent: "Switch",
    editValueMap: (value) => {
      return value ? "开" : "关";
    },
    width: 100,
  },
  {
    title: "单选框",
    dataIndex: "radio1",
    editRow: true,
    editComponent: "RadioGroup",
    editComponentProps: {
      options: [
        {
          label: "选项1",
          value: "1",
        },
        {
          label: "选项2",
          value: "2",
        },
      ],
    },
    width: 200,
  },
  {
    title: "单选按钮框",
    dataIndex: "radio2",
    editRow: true,
    editComponent: "RadioButtonGroup",
    editComponentProps: {
      options: [
        {
          label: "选项1",
          value: "1",
        },
        {
          label: "选项2",
          value: "2",
        },
      ],
    },
    width: 200,
  },
  {
    title: "远程单选框",
    dataIndex: "radio3",
    editRow: true,
    editComponent: "ApiRadioGroup",
    editComponentProps: {
      api: optionsListApi,
      resultField: "list",
      labelField: "name",
      valueField: "id",
    },
    width: 200,
  },
];

const { createMessage: msg } = useMessage();
const currentEditKeyRef = ref("");
const [registerTable] = useTable({
  title: "可编辑行示例",
  titleHelpMessage: [
    "本例中修改[数字输入框]这一列时，同一行的[远程下拉]列的当前编辑数据也会同步发生改变",
  ],
  api: demoListApi,
  columns: columns,
  showIndexColumn: false,
  showTableSetting: true,
  tableSetting: { fullScreen: true },
  actionColumn: {
    width: 160,
    title: "Action",
    dataIndex: "action",
    // slots: { customRender: 'action' },
  },
});

function handleEdit(record: EditRecordRow) {
  currentEditKeyRef.value = record.key;
  record.onEdit?.(true);
}

function handleCancel(record: EditRecordRow) {
  currentEditKeyRef.value = "";
  record.onEdit?.(false, false);
}

async function handleSave(record: EditRecordRow) {
  // 校验
  msg.loading({ content: "正在保存...", duration: 0, key: "saving" });
  const valid = await record.onValid?.();
  if (valid) {
    try {
      const data = cloneDeep(record.editValueRefs);
      console.log(data);
      //TODO 此处将数据提交给服务器保存
      // ...
      // 保存之后提交编辑状态
      const pass = await record.onEdit?.(false, true);
      if (pass) {
        currentEditKeyRef.value = "";
      }
      msg.success({ content: "数据已保存", key: "saving" });
    } catch (error) {
      msg.error({ content: "保存失败", key: "saving" });
    }
  } else {
    msg.error({ content: "请填写正确的数据", key: "saving" });
  }
}

function createActions(record: EditRecordRow): ActionItem[] {
  if (!record.editable) {
    return [
      {
        label: "编辑",
        disabled: currentEditKeyRef.value
          ? currentEditKeyRef.value !== record.key
          : false,
        onClick: handleEdit.bind(null, record),
      },
    ];
  }
  return [
    {
      label: "保存",
      onClick: handleSave.bind(null, record),
    },
    {
      label: "取消",
      popConfirm: {
        title: "是否取消编辑",
        confirm: handleCancel.bind(null, record),
      },
    },
  ];
}

function onEditChange({ column, value, record }) {
  // 本例
  if (column.dataIndex === "id") {
    record.editValueRefs.name4.value = `${value}`;
  }
  console.log(column, value, record);
}
</script>
